<html>
<head>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!-- <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e"></script> -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bfhsBbWL2YwFbGGGnQ9yaaYK7RoeVqP6"></script>
    <script type="text/javascript" src="/static/js/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
    <link rel="stylesheet" type="text/css" media="all" href="https://cdn.bootcss.com/layer/3.0.1/skin/default/layer.css" />
    <title>标注事项地点</title>

    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>

</head>

<body>
<div class="container"><!-- 这是使用了bootstrap -->
    <div id="allmap"></div>
    <form class="form-horizontal" role="form" action="bpm/bmfw/addMaker"
          id="mapMsgForm" method="post">
        <div class="form-group">
            <div class="col-sm-10">
                <input type="hidden" name="bjh" value="${bjh}">
                <!-- 许可编号 -->
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-10">
                <input type="hidden" name="sqr" value="${sqr}">
                <!-- 申请人 -->
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-10">
                <input type="hidden" name="sx" value="${sx}">
                <!-- 事项 -->
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-10">
                <input type="hidden" name="pointX" value="">
                <!-- 标记坐标 -->
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-10">
                <input type="hidden" name="pointY" value="">
                <!-- 标记坐标 -->
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default"></button>
            </div>
        </div>
    </form>
</div>
</body>
</html>
<script type="text/javascript">
    var marker;
    var time = 0;
    var bjh = $("input[name='bjh']").val();
    var sx = $("input[name='sx']").val();
    var sqr = $("input[name='sqr']").val();
    var pointX;
    var pointY;

    // 百度地图API功能
    var map = new BMap.Map("allmap"); // 创建Map实例
    map.centerAndZoom(new BMap.Point(119.847604, 31.274829), 17); // 初始化地图,设置中心点坐标和地图级别
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes : [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]
    }));
    map.setCurrentCity("宜兴"); // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    //点击地图并在此添加标记
    map.addEventListener("click", function(e) {
        if (time >= 1) {
            return;
        } else {
            popLayer(e);
        }

    });

    //删除标记
    var removeMarker = function(e, ee, marker) {
        $.ajax({
            type : 'POST',
            async : true,
            url : '/bpm/bmfw/deleteMaker',
            data : {
                "bjh":bjh
            },
            success : function(result){
                console.log("删除成功");
                //成功的话向地图上创建标记和标注
                map.removeOverlay(marker);
                time = time - 1;
            },error : function(){
                console.log("删除标注失败！");
            }
        });
    };
    //提交地图信息
    var commitMapMsg = function(e, ee, marker) {

        $("#mapMsgForm").submit();

    };

    function popLayer(e) {

        //将经纬度存入form中
        $("input[name='pointX']").val(e.point.lng);
        $("input[name='pointY']").val(e.point.lat);

        //取出经纬度
        pointX = $("input[name='pointX']").val();
        pointY = $("input[name='pointY']").val();

        layer.open({
            title : '确认在此地标注？',
            content : '<p>许可证号：' + bjh + '</p><p>申请人/单位：' + sqr
            + '</p><p>许可事项：' + sx + '</p>',
            yes : function(index, layero) {
                //点击确认,即提交信息
                $.ajax({
                    type : 'POST',
                    async : true,
                    url : '/bpm/bmfw/addMaker',
                    data : {
                        "bjh":bjh,
                        "sx":sx,
                        "sqr":sqr,
                        "pointX":pointX,
                        "pointY":pointY
                    },success : function(result){
                        console.log("成功");
                        //成功的话向地图上创建标记和标注
                        createMaker(e);
                    },error : function(){
                        console.log("创建标注失败！");
                    }
                });
                layer.close(index);
            }
        });
    }

    function createMaker(e){
        marker = new BMap.Marker(e.point);
        map.addOverlay(marker);
        map.panTo(e.point);
        /* marker.setAnimation(BMAP_ANIMATION_BOUNCE);//跳动的标记 */
        //创建右键菜单
        var markerMenu = new BMap.ContextMenu();
        markerMenu.addItem(new BMap.MenuItem('删除', removeMarker
            .bind(marker)));
        marker.addContextMenu(markerMenu);
        /* markerMenu.addItem(new BMap.MenuItem('提交', commitMapMsg
         .bind(marker)));

         marker.addContextMenu(markerMenu); */

        //标注
        var text = "<p>许可证号：" + bjh + "</p><p>申请人/单位：" + sqr
            + "</p><p>许可事项：" + sx + "</p>";

        var label = new BMap.Label(text, {
            offset : new BMap.Size(-85, -120)
        });
        //设置label(标注的样式)
        label.setStyle({
            color : "black",
            fontSize : "12px",
            height : "110px",
            //lineHeight : "20px",
            fontFamily : "微软雅黑",
            maxWidth : "none",
            border : "none"
        });
        marker.setLabel(label);

        time = time + 1;
    }
</script>
